<template>
  <div>
    <van-search v-model="value" placeholder="商品搜索" shape="round" />
    <div class="box">
      <div class="left">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            v-for="item in categoryList"
            :key="item.id"
            :title="item.name"
          >
          <img class="banner" :src="item.banner_url" alt=""></van-sidebar-item>
        </van-sidebar>
        <div>
        </div> 
      </div>
      
      <div class="right">
        <img class="banner" :src="list.banner_url" alt="">
        <p class="title">-{{list.name}}好物-</p> 
        <van-grid :border="false" :column-num="3" :gutter="6">
          <van-grid-item
            v-for="item in list.subList"
            :key="item.id"
            :to="{ path: '/category/categorylist', query: {id: item.id}}"
          >
            <van-image :src="item.wap_banner_url" />
            <p>{{ item.name }}</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
import { indexaction, currentaction } from "@/api/category";

export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      categoryList: {},
      list: {},
    };
  },
  computed: {},
  created() {
    indexaction({}).then((res) => {
      console.log(res);
      this.categoryList = res.categoryList;
      console.log(this.categoryList);
      this.onChange(this.activeKey);
    });
  },
  mounted() {
    // this.init()
  },
  methods: {
    onChange(activeKey) {
      //   console.log(activeKey);
      currentaction({
        id: this.categoryList[activeKey].id,
      }).then((res) => {
        console.log(res);
        this.list = res.data.currentOne;
        console.log(this.list);
      });
    },
    // init(){
    //     var index = this.activeKey
    //     currentaction({
    //     id: this.categoryList[index].id,
    //   }).then((res) => {
    //     // console.log(res);
    //     console.log(this.list);
    //     this.list = res.data.currentOne.subList;
    //   });
    // }
  },
};
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  //   display: flex;
    justify-content: space-around;
  background-color: #fff;
}
.top {
  display: flex;
}
//   justify-content: space-between;
//   .van-search {
//     position: fixed;

//   van-sidebar {

//   }
::v-deep .van-grid {
  width: 300px;
  img {
    height: 1.92rem;
    width: 1.92rem;
  }
  
}
::v-deep .banner{
  width: 80%;
  height: auto;
}

img {
  width: 100%;
  height: 100%;
}
.title{
  font-size: .32rem;
    color: #333;
    padding: 0 0.13333rem;
}
</style>
